<!--
    group: 账单管理
    name: 分润结算详情
    url: /billManagement/settlementDetails
-->
<template>
  <div class="main_content">
    <div class="main_header">
      <h3><span class="icon"></span>渠道分润</h3>
      <a-button class="default-btns" @click="backList">返回</a-button>
    </div>

    <div class="content" v-if='detailsData'>
      <a-table
        :scroll="{x:800}"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
      >
        <template slot="title" slot-scope="currentPageData">本期结算单</template>

        <!-- 渠道 -->
        <span slot="channelName" slot-scope="text,record">
					  <j-ellipsis :value="text" :length="10" />
				  </span>
        <!-- 结算周期 -->
        <span slot="settleAccountsCycle" slot-scope="text,record">
					  {{getMonthDays(text)}}
				  </span>
        <!-- 发票类型 -->
        <span slot="invoiceType" slot-scope="text,record">
          <span :class="text === 1 ? 'd' : 'c'">
            {{
              {1:'专票',2:'普票'}[text]
            }}
          </span>
        </span>

        <template slot="footer" slot-scope="currentPageData">
          <p>合计收入： <span>{{ sumAmount }}元</span></p>
        </template>
      </a-table>
      <a-table
        :scroll="{x:800}"
        :columns="columns"
        :data-source="tableData1"
        :pagination="false"
      >
        <template slot="title" slot-scope="currentPageData">往期结算单变更</template>

        <!-- 渠道 -->
        <span slot="channelName" slot-scope="text,record">
					  <j-ellipsis :value="text" :length="10" />
				  </span>
        <!-- 结算周期 -->
        <span slot="settleAccountsCycle" slot-scope="text,record">
					  {{getMonthDays(text)}}
				  </span>
        <!-- 发票类型 -->
        <span slot="invoiceType" slot-scope="text,record">
          <span :class="text === 1 ? 'd' : 'c'">
            {{
              {1:'专票',2:'普票'}[text]
            }}
          </span>
        </span>

        <template slot="footer" slot-scope="currentPageData">
          <p>合计扣除： <span>{{ sumDeduction }}元</span></p>
          <p>累计支付金额： <span>{{ detailsData.totalAmount }}元</span></p>
        </template>

      </a-table>

      <div class="describe">
        <p class="tips" style="margin-top: 20px;">
          请您确认金额后，3个工作日内向我司开具发票并寄回，我们将在收到发票后3个工作日内完成款项支付，如有疑问。请 &nbsp;
          <a-button type="primary" ghost @click="contactService">点击此处</a-button> &nbsp; 联系客服。谢谢您的合作！
        </p>
        <a-button v-if="detailsData.repayStatus == 30" type="primary" @click="showOpen" class="mLeft btnsLarge">确认</a-button>
        <a-button v-else type="primary" :disabled="true" class="mLeft btnsLarge">已确认</a-button>

      </div>
      <div class="box">
        <div class="item">
          <p class="title">发票开具信息:</p>
          <a-form v-if="invoiceList" class="form1">
            <a-form-item label="发票类型">{{invoiceList.invoiceType}}</a-form-item>
            <a-form-item label="开票金额">{{invoiceList.invoiceMoney}}<span v-if="invoiceList.invoiceMoney">元</span></a-form-item>
            <a-form-item label="开票内容">{{invoiceList.invoiceContent}}</a-form-item>
            <a-form-item label="单位名称">{{invoiceList.invoiceName}}</a-form-item>
            <a-form-item label="纳税人识别号">{{invoiceList.taxpayerId}}</a-form-item>
            <a-form-item label="账号">{{invoiceList.account}}</a-form-item>
            <a-form-item label="开户行">{{invoiceList.openingBank}}</a-form-item>
            <a-form-item label="地址">{{invoiceList.invoiceAddress}}</a-form-item>
            <a-form-item label="电话">{{invoiceList.invoicePhone}}</a-form-item>
          </a-form>
          <a-empty v-else />
        </div>
        <div class="item">
          <p class="title">发票快递信息:</p>
          <a-form v-if="expressList" class="form2">
            <a-form-item label="联系人">{{expressList.contactName}}</a-form-item>
            <a-form-item label="电话">{{expressList.phone}}</a-form-item>
            <a-form-item label="地址">{{expressList.address}}</a-form-item>
<!--            <a-form-item label="邮箱" class="email">{{expressList.email}}</a-form-item>-->
<!--            <span style="color: #6C6C6C;font-size: 14px;">纸质发票请按以上快递信息进行邮寄，电子发票请发送到邮箱地址</span>-->
          </a-form>
          <a-empty v-else />
        </div>
      </div>
    </div>

    <!--上传发票-->
    <a-modal v-model="invoiceModal" title="上传发票" :footer="null" :closable="false">
      <UpLoadFile ref="invoice" :config="invoiceConfig"
                  :fileChangeEvent="(type, fileData) => { retrievalData(type, fileData) }"></UpLoadFile>

      <p style="width: 100%;text-align: center;">
        <a-button type="primary" @click="sure">确定发布</a-button>
      </p>
    </a-modal>

    <!--联系客服-->
    <a-modal v-model="customerVisible" title="请扫码添加客服微信" :footer="null" :closable="false">
      <div class="code">
        <img :src="customGlobal.customerService" alt="客服">
      </div>
    </a-modal>

  </div>
</template>

<script>
import { dividendListDetail,dividendDetailsSure } from '@/api/billManagement'
import { cloneObject,conversionDate,conversionElement } from '@/utils/util'
export default {
  name: "settlementDetails",
  data(){
    return{
      detailsData: {},
      invoiceList: {}, //开票信息
      expressList: {},  //快递信息
      loading: false,
      tableData: [],
      tableData1: [],
      columns: [
        {
          title: '开票企业',
          dataIndex: 'channelName',
          scopedSlots: {customRender: 'channelName'},
          ellipsis: true,
          width: 150,
          align: 'center'
        },
        {
          title: '结算周期',
          dataIndex: 'settleAccountsCycle',
          scopedSlots: {customRender: 'settleAccountsCycle'},
          ellipsis: true,
          width: 250,
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'taxMoney',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          width: 120,
          align: 'center'
        },
        {
          title: '发票类型',
          dataIndex: 'invoiceType',
          scopedSlots: {customRender: 'invoiceType'},
          width: 100,
          align: 'center'
        },
        {
          title: '个税金额',
          dataIndex: 'personalMoney',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '分润比例',
          dataIndex: 'personalRate',
          customRender: (text,record) => {
            return  Math.round(text * 10000)/100 + '%'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '分润金额',
          dataIndex: 'repayPersonal',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '增值税',
          dataIndex: 'vatMoney',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '分润比例',
          dataIndex: 'vatRate',
          customRender: (text,record) => {
            return Math.round(text * 10000)/100 + '%'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '分润金额',
          dataIndex: 'repayVat',
          customRender: (text, record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          width: 150,
          align: 'center'
        },
        {
          title: '分润总额',
          dataIndex: 'totalMoney',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
          align: 'center',
          width: 150
        },
      ],


      customerVisible: false,  //联系客服
      invoiceModal: false,  //上传发票弹层
      //上传发票
      invoiceConfig: {
        dir: '/qsb/invoice/', // 上传文件的地址
        required: true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        // multiple: false, // 优先级高于isTwo  开启多文件上传  默认值为false   当值为true时表示开启对文件上传，同时 isTwo 和 upLoadCardListConfig 失效
        // isTwo: false, // 是否开启两个卡片上传 默认为false  表示只启用单个卡片单文件上传   true 表示开启两个卡片的单文件上传
        showCardList:['card1'],
        upLoadCardListConfig: [
          { type: '1', tips: '  ', fileInfo: { name: '', url: '' } },
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig: {
          type: '图片', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 1, // 允许上传的文件个数  默认值为1
          singleFileSize: 5, //上传的单个文件大小 单位为 MB  默认值为1
        }
      },
      fileList: []
    }
  },
  computed:{
    sumAmount(){
      return this.tableData.map(row => row.totalMoney).reduce((acc, cur) => (parseInt(cur) + acc), 0)/100
    },
    sumDeduction(){
      return this.tableData1.map(row => row.totalMoney).reduce((acc, cur) => (parseInt(cur) + acc), 0)/100
    }
  },
  mounted() {
    this.getTableDetails();
  },
  methods:{
    //返回列表
    backList(){
      this.$router.back();
    },
    //确认
    showOpen(){
      this.invoiceModal = true;
    },
    //上传发票
    retrievalData(type, files) {
      if (type == 'card1') {
        this.fileList = [
          {
            fileName: files.name,
            fileUrl: files.url
          }
        ];
      }
    },
    //确认发布
    sure(){
      this.$refs['invoice'].getData()
      this.$refs['invoice'].getDataCheckRes()

      let params = {};
      params.files = this.fileList;
      params.channelId = this.detailsData.channelId;
      params.settleAccountsCycle = this.detailsData.settleAccountsCycle;
      dividendDetailsSure(params).then(res => {
        if (res.success){
          this.$message.success('发布成功');
          this.invoiceModal = false;
          this.getTableDetails();
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //联系客服
    contactService(){
      this.customerVisible = true;
    },
    //查看详情
    getTableDetails(){
      let params = {};
      params.settleAccountsCycle = this.$route.query.bizId;
      dividendListDetail(params).then(res => {
        if (res.success) {
          if (res.result){
            this.detailsData = res.result;
            let paramsNew = cloneObject(res.result);
            this.detailsData.totalAmount = conversionElement(paramsNew.totalAmount);

            this.invoiceList = paramsNew.channelInvoiceInfo;
            if(this.invoiceList){
              this.invoiceList.invoiceMoney = conversionElement(paramsNew.channelInvoiceInfo.invoiceMoney);
            }
            this.expressList = paramsNew.express;

            let data = paramsNew.dividendDetails;
            // type:  1 本期  2 往期
            this.tableData = data.filter(function(item) { return item.type == 1 })
            this.tableData1 = data.filter(function(item) { return item.type == 2})
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //日期转换
    getMonthDays(date) {
      return conversionDate(date)
    }
  }
}
</script>

<style scoped lang="less">
.main_header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

h3{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
/deep/.ant-col{
  font-weight: bold;
}

//客服
.code{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}
/deep/.ant-modal-title{
  font-weight: normal;
  font-size: 20px;
}



.content{
  margin-top: 20px;
  padding: 0 30px 50px 30px;
  .describe{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    padding: 10px;
  }
  .box {
    width: 100%;
    min-height: 100px;
    border: 1px solid #e8e8e8;
    display: flex;

    .item {
      width: 50%;
      padding: 30px 20px;
      box-sizing: border-box;

      .title {
        font-size: 18px;
        color: #101010;
        font-weight: bolder;
      }

      .ant-form-item {
        width: 100%;
        margin-bottom: 0;
        display: flex;
        justify-content: left;
      }

      /deep/.form1 .ant-form-item .ant-form-item-label{
        width: 120px;
        flex-shrink:0;
        text-align: left;
        white-space: nowrap;
      }
      /deep/.form2 .ant-form-item .ant-form-item-label{
        width: 60px;
        flex-shrink:0;
        text-align: left;
        white-space: nowrap;
      }
      /deep/.ant-form-item  .ant-form-item-control{
        flex: 1;
      }
    }
  }
}

//
.ant-table-wrapper{
  border: 1px solid #e8e8e8;
}
/deep/.ant-table-title{
  text-align: center;
  background: #fafafa;
  font-weight: bold;
}
/deep/.ant-table-thead > tr > th{
  background: #FFFFFF;
  border-top: 1px solid #e8e8e8;
}
/deep/.ant-table-footer{
  text-align: right;
  background: #FFFFFF;
  padding: 0;
}
/deep/.ant-table-footer p{
  box-sizing: border-box;
  padding: 16px 50px 0px 16px;
}
/deep/.ant-table-footer p:nth-child(2){
  border-top: 1px solid #e8e8e8;
}
/deep/.ant-table-thead > tr:first-child > th:first-child{
  border-radius: 0px;
}

</style>

